<!DOCTYPE html>
<html>
<head>
    <title></title>
    <#include "/header.html">
</head>
<style>
    .el-upload__input {
        display: none !important;
    }
</style>
<body>

<div id="rrapp" v-cloak>
    <div v-show="showList">
        <div class="grid-btn">
            <div style="float: left;height:34px;line-height:34px;">广告名称：</div>
            <div style="float: left;">
                <input type="text" class="form-control" v-model="q.name" @keyup.enter="query" placeholder="请输入内容">
            </div>
            <div style="float: left;margin-left:10px;height:34px;line-height:34px;">状态：</div>
            <div style="float: left;width:160px;margin-right: 10px;">
                <select class="form-control" v-model="q.type" @keyup.enter="query">
                    <option></option>
                    <option value="0">未开始</option>
                    <option value="1">投放中</option>
                    <option value="2">已结束</option>
                </select>
            </div>
            <a class="btn btn-primary" @click="query">搜索</a>
            <#if shiro.hasPermission("sys:advert:save")>
            <a class="btn btn-primary" @click="add">新增广告</a>
        </#if>
    </div>
    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
</div>

<div v-show="!showList" class="panel panel-default">
    <div class="panel-heading">{{title}}</div>
    <form class="form-horizontal">
        <div class="form-group">
            <div class="col-sm-2 control-label"><span style="color: red">*</span>广告名称</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="advert.adname" placeholder="广告名称"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label"><span style="color: red">*</span>广告图片</div>
            <div class="col-sm-10">
                <el-upload
                        class="upload-demo"
                        action="http://localhost:8081/renren-api/api/file/uploadfile"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove1"
                        :file-list="fileList1"
                        :on-success="handsuccess1"
                        list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>

                <input type="text" class="form-control" v-model="advert.adimg" style="display: none;"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label"><span style="color: red">*</span>跳转方式</div>
            <div class="col-sm-10" @click="getType">
                <div style="height: 35px">
                    <label class="radio-inline">
                        <input type="radio" name="type" v-model="advert.type" value="0"/> 只展示不跳转
                    </label>
                </div>
                <div style="height: 35px">
                    <label class="radio-inline" style="float: left">
                        <input type="radio" name="type" v-model="advert.type" value="1"/> 跳转本小程序
                    </label>
                    <div id="lujin" hidden="true" style="width: 800px; ; margin-left: 5px;height:35px;line-height:35px;">
                        <span style="color: red;float:left;margin-left:20px;">*</span>
                        <span style="float: left;">页面路径：</span>
                        <input type="text" class="form-control" v-model="advert.url" placeholder="跳转路径" style="width:300px;float:left;"/>
                        <span style="float:left;">可跳转至文章、优惠券等页面路径</span>
                    </div>
                </div>
                <div style="height: 35px">
                    <label class="radio-inline" style="float: left">
                        <input type="radio" name="type" v-model="advert.type" value="2"/> 公众号文章
                    </label>
                    <div id="lianjie" hidden="true" style="width: 900px; ; margin-left: 5px;height:35px;line-height:35px;">
                        <span style="color: red;float:left;margin-left:20px;">*</span>
                        <span style="float: left;">跳转链接：</span>
                        <input type="text" class="form-control" v-model="advert.url" placeholder="跳转链接" style="width:300px;float:left;"/>
                        <span style="float:left;">公众号需与本小程序关联才可正常跳转</span>
                    </div>
                </div>

            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label"><span style="color: red">*</span>货架权限</div>
            <div class="col-sm-10" @click="getHj">
                <label class="radio-inline">
                    <input type="radio" name="shelvesposition" v-model="advert.shelvesposition" value="0"/> 全部货架
                    <div id="qbhj" style="left: 70%;margin-left: -125px;margin-top: -85px;min-width: 250px;max-width: 500px;
                            padding: 10px;line-height: 24px;position: absolute;font-size: 12px;text-align: center;
                            background-color: #fff;box-shadow: 0 0 7px rgba(0,0,0,.2);z-index: 9;color: #4c4948;display: none;">
                        全部货架包括后续新创建的所有货架

                    </div>
                    <img src="../../statics/img/ico20-question.png" onmouseover="$('#qbhj').show()" onmouseout="$('#qbhj').hide()">
                </label>
                <label class="radio-inline">
                    <input type="radio" name="shelvesposition" v-model="advert.shelvesposition" value="1"/> 部分货架
                </label>
            </div>

        </div>

        <div class="form-group" style="margin-bottom:0px;width:930px;" hidden="true" id="tjsp">
            <div style="box-sizing: border-box;margin-bottom: 10px!important;height: 33px;">
                <div style="float: right;">
                    <a class="btn btn-default" @click="addShelves" style="background-color: #f07065!important;color:#fff">&nbsp;添加货架</a>
                </div>
            </div>
        </div>

        <div class="form-group" style="width:1100px;" id="bfhj" hidden="true">

            <div class="col-sm-10" style="width:950px;">
                <div style="border: none!important;margin: 0!important;width: 100%;padding-left: 132px;">
                    <div style="margin-bottom: 0;border: 1px solid #e2e5ed!important;min-height: .01%;margin-top: 15px;">
                        <table style="border-top-left-radius: 3px;border-top-right-radius: 3px;
                            border: 0;display: table;margin-bottom: 0!important;width: 100%;border-collapse: collapse;">
                            <thead style="background-color: #F7F9FB;">
                            <th style="border-right:solid 1px rgb(226, 229, 237);padding: 10px 0;
                                        font-weight: 400!important;font-size: 12px!important;line-height: 1.42857143;text-align: center;">货架名称</th>
                            <th style="border-right:solid 1px rgb(226, 229, 237);padding: 10px 0;
                                        font-weight: 400!important;font-size: 12px!important;line-height: 1.42857143;text-align: center;">货架地址</th>
                            <th style="border-right:solid 1px rgb(226, 229, 237);padding: 10px 0;
                                        font-weight: 400!important;font-size: 12px!important;line-height: 1.42857143;text-align: center;">货架分组</th>
                            <th style="border-top: 0;border-bottom: 0;border-left: 0;padding: 10px 0;
                                        font-weight: 400!important;font-size: 12px!important;line-height: 1.42857143;text-align: center;">操作</th>
                            </thead>
                            <tbody id="shelves">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label"><span style="color: red">*</span>投放时间</div>
            <div class="col-sm-10" id="sandbox-container">
                <div class="input-group date" style="width:46%;float:left;">
                    <input type="text" class="form-control" id="timestar"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
                </div>
                <div style="width: 4%;float:left;margin-left:7px;margin-top:8px;padding-left:1px;">
                    -
                </div>
                <div class="input-group date" style="width:48%;">
                    <input type="text" class="form-control" id="timeend"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label"></div>
            <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
            &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
        </div>
    </form>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <form class="form-horizontal">
            <div class="modal-content" style="width: 650px;">
                <div style="padding: 15px;">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <div style="padding: 20px 0;border-bottom: 1px solid #E2E5ED;">
                        <p style="font-size: 14px;color: #4c4948;float: left;margin: 0!important;">选择货架</p>
                    </div>
                </div>
                <div class="modal-body">
                    <div style="margin-bottom: 15px">
                        <div style="float: left;margin-left:10px;height:34px;line-height:34px;">货架名称：</div>
                        <div style="float: left;width:160px;margin-right: 10px;">
                            <input type="text" class="form-control" v-model="qs.sname" @keyup.enter="queryShelves" placeholder="请输入内容">
                        </div>
                        <div style="float: left;margin-left:10px;height:34px;line-height:34px;">货架分组：</div>
                        <div style="float: left;width:160px;margin-right: 10px;">
                            <select class="form-control" v-model="qs.groupid" @keyup.enter="queryShelves" id="s_id">

                            </select>
                        </div>
                        <a class="btn btn-primary" @click="queryShelves">搜索</a>
                    </div>

                    <table id="jqGridAdd" style="width: 100%;"></table>
                    <div id="jqGridPagerAdd" style="width: 100%"></div>
                    <a class="btn btn-primary" @click="showShelves" style="margin-left: 290px;margin-top: 10px">确定</a>
                </div>
            </div>
        </form>
    </div>
</div>
</div>

<script src="${request.contextPath}/statics/js/modules/sys/gg.js?_${.now?long}"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    $("#sandbox-container .input-group.date").datepicker({
        language: "zh-CN",
        clearBtn: true, //清除按钮
        format: "yyyy-mm-dd",
        todayHighlight:true
    });
</script>
</body>
</html>